<template>
  <div class="ele-body">
    <el-row :gutter="15" style="margin-bottom: 15px" v-if="account_type == 2">
      <el-col :md="5" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir one">
              <div class="card_box_cir1 one1">
                <i class="iconfont el-icon-_money-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="get * 1" :options="countUpOptions"
              /></span>
              <span class="sp2">累计充值</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="5" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir two">
              <div class="card_box_cir1 two1">
                <i class="iconfont el-icon-_database-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="out * 1" :options="countUpOptions"
              /></span>
              <span class="sp2">累计扣除</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="4" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir five">
              <div class="card_box_cir1 five1">
                <i class="iconfont el-icon-_red-packet-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="remain * 1" :options="countUpOptions"
              /></span>
              <span class="sp2">当前剩余</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="5" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir three">
              <div class="card_box_cir1 three1">
                <i class="iconfont el-icon-_present-sloid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up
                  :end-val="todayGet * 1"
                  :options="countUpOptions"
              /></span>
              <span class="sp2">今日充值</span>
            </div>
          </div>
        </el-card>
      </el-col>

      <el-col :md="5" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir four">
              <div class="card_box_cir1 four1">
                <i class="iconfont el-icon-_time-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up
                  :end-val="todayOut * 1"
                  :options="countUpOptions"
              /></span>
              <span class="sp2">今日扣除</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-row :gutter="15" style="margin-bottom: 15px" v-else>
      <el-col :md="8" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir one">
              <div class="card_box_cir1 one1">
                <i class="iconfont el-icon-_money-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="avatarCountUsed * 1"
              /></span>
              <span class="sp2">形象克隆</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="8" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir two">
              <div class="card_box_cir1 two1">
                <i class="iconfont el-icon-_database-solid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="voiceCountUsed * 1"
              /></span>
              <span class="sp2">声音克隆</span>
            </div>
          </div>
        </el-card>
      </el-col>
      <el-col :md="8" :sm="24">
        <el-card shadow="never">
          <div class="card_box">
            <div class="card_box_cir three">
              <div class="card_box_cir1 three1">
                <i class="iconfont el-icon-_present-sloid"></i>
              </div>
            </div>
            <div class="card_box_txt">
              <span class="sp1"
                ><vue-count-up :end-val="videoCountUsed * 1"
              /></span>
              <span class="sp2">视频剪辑</span>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
    <el-card shadow="never">
      <!-- 搜索表单 -->
      <log-search @search="reload" />
      <!-- 数据表格 -->
      <ele-pro-table
        ref="table"
        :columns="columns"
        :datasource="datasource"
        :selection.sync="selection"
      >
        <!-- 表头工具栏 -->
        <template v-slot:toolbar v-if="loginUser.tenant_id == 1">
          <el-button
            size="small"
            type="danger"
            icon="el-icon-delete"
            class="ele-btn-icon"
            @click="removeBatch"
          >
            删除
          </el-button>

          <el-button
            size="small"
            type="info"
            icon="el-icon-_save"
            class="ele-btn-icon"
            @click="onExport"
          >
            导出
          </el-button>
        </template>

        <template v-slot:currentHeader>
          <span v-if="account_type == 1">操作前次数</span>
          <span v-if="account_type == 2">操作前点数</span>
        </template>

        <template v-slot:pointHeader>
          <span v-if="account_type == 1">操作次数</span>
          <span v-if="account_type == 2">操作点数</span>
        </template>

        <template v-slot:account="{ row }">
          <div class="ele-cell-content">
            <div class="ele-cell-title">{{ row.figureAccount.name }} </div>
            <div class="ele-cell-title">{{ row.figureAccount.telphone }} </div>
          </div>
        </template>

        <template v-slot:point="{ row }">
          <el-tag v-if="row.type == 1" type="success">+{{ row.point }}</el-tag>
          <el-tag v-if="row.type == 2" type="danger">-{{ row.point }}</el-tag>
        </template>

        <template v-slot:way="{ row }">
          <el-tag v-if="row.way == 0" type="info" effect="light"
            >后台操作</el-tag
          >
          <el-tag v-if="row.way == 1" type="success" effect="light"
            >点数充值</el-tag
          >
          <el-tag v-if="row.way == 2" type="warning" effect="light"
            >声音克隆入门版</el-tag
          >
          <el-tag v-if="row.way == 3" type="warning" effect="light"
            >声音克隆高保真</el-tag
          >
          <el-tag v-if="row.way == 4" type="primary" effect="light"
            >形象克隆线路三版</el-tag
          >
          <el-tag v-if="row.way == 5" type="success" effect="light"
            >视频换脸</el-tag
          >
          <el-tag
            v-if="row.way == 6 && row.type == 2"
            type="danger"
            effect="light"
            >视频合成高级版</el-tag
          >

          <el-tag
            v-if="row.way == 6 && row.type == 1"
            type="danger"
            effect="light"
            >视频合成高级版退款</el-tag
          >
          <el-tag v-if="row.way == 7" type="primary" effect="light"
            >形象克隆高级版</el-tag
          >
          <el-tag v-if="row.way == 8" type="warning" effect="light"
            >声音克隆高保真合成</el-tag
          >
          <el-tag v-if="row.way == 9" type="danger" effect="light"
            >视频合成线路三版</el-tag
          >
          <el-tag v-if="row.way == 10" type="danger" effect="light"
            >ai文案创作</el-tag
          >
          <el-tag v-if="row.way == 11" type="danger" effect="light"
            >视频提交文案</el-tag
          >
          <el-tag v-if="row.way == 12" type="danger" effect="light"
            >视频合成高级版2</el-tag
          >
          <el-tag v-if="row.way == 13" type="danger" effect="light"
            >专业版声音克隆</el-tag
          >
          <el-tag v-if="row.way == 14" type="danger" effect="light"
            >专业版音频合成</el-tag
          >
          <el-tag v-if="row.way == 15" type="danger" effect="light"
            >ai标题生成</el-tag
          >
          <el-tag v-if="row.way == 16" type="danger" effect="light"
            >抖音视频扣点</el-tag
          >
          <el-tag v-if="row.way == 17" type="danger" effect="light"
            >快手视频扣点</el-tag
          >
          <el-tag v-if="row.way == 18" type="danger" effect="light"
            >视频号视频扣点</el-tag
          >
          <el-tag v-if="row.way == 19" type="danger" effect="light"
            >小红书视频扣点</el-tag
          >
           <el-tag v-if="row.way == 20" type="danger" effect="light"
            >获取抖音二维码</el-tag
          >
            <el-tag v-if="row.way == 21" type="danger" effect="light"
            >抖音授权</el-tag
          >
             <el-tag v-if="row.way == 22" type="danger" effect="light"
            >获取视频号二维码</el-tag
          >
              <el-tag v-if="row.way == 23" type="danger" effect="light"
            >视频号授权</el-tag
          >
             <el-tag v-if="row.way == 24" type="danger" effect="light"
            >获取小红薯二维码</el-tag
          >
             <el-tag v-if="row.way == 25" type="danger" effect="light"
            >小红薯授权</el-tag
          >
             <el-tag v-if="row.way == 26" type="danger" effect="light"
            >线路四合成</el-tag
          >
              <el-tag v-if="row.way == 27" type="danger" effect="light"
            >ip账号采集</el-tag
          >
              <el-tag v-if="row.way == 28" type="danger" effect="light"
            >主页视频分析</el-tag
          >
        </template>

        <!-- 操作列 -->
        <template v-slot:action="{ row }" v-if="loginUser.tenant_id == 1">
          <el-popconfirm
            v-if="loginUser.tenant_id == 1"
            class="ele-action"
            title="确定要删除此数据吗？"
            @confirm="remove(row)"
          >
            <template v-slot:reference>
              <el-link type="danger" :underline="false" icon="el-icon-delete">
                删除
              </el-link>
            </template>
          </el-popconfirm>
        </template>
      </ele-pro-table>
    </el-card>
  </div>
</template>

<script>
import VueCountUp from 'vue-countup-v2';
import LogSearch from './components/log-search';
import { list, remove, modify, statis } from '@/api/account/log';
import { utils, writeFile } from 'xlsx';

export default {
  name: 'AccountLog',
  components: {
    LogSearch,
    VueCountUp
  },
  computed: {
    // 当前登录用户信息
    loginUser() {
      return this.$store.state.user.info;
    }
  },
  data() {
    return {
      countUpOptions: {
        useEasing: true,
        useGrouping: true,
        decimalPlaces: 2,
        separator: ',',
        decimal: '.',
        prefix: '',
        suffix: ''
      },
      // 表格列配置
      columns: [
        {
          columnKey: 'selection',
          type: 'selection',
          width: 45,
          align: 'center',
          fixed: 'left'
        },

        {
          prop: 'account',
          label: '账号',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'account'
        },
        {
          prop: 'current',
          label: '当前点数',
          showOverflowTooltip: true,
          minWidth: 110,
          headerSlot: 'currentHeader'
        },
        {
          prop: 'point',
          label: '操作点数',
          showOverflowTooltip: true,
          minWidth: 110,
          headerSlot: 'pointHeader',
          slot: 'point'
        },
        {
          prop: 'way',
          label: '使用类型',
          showOverflowTooltip: true,
          minWidth: 110,
          slot: 'way'
        },
        {
          prop: 'desc',
          label: '描述',
          showOverflowTooltip: true,
          minWidth: 110
        },
        {
          prop: 'create_time',
          label: '操作时间',
          showOverflowTooltip: true,
          minWidth: 100
        }
      ],
      // 表格选中数据
      selection: [],
      // 当前编辑数据
      current: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 是否显示分配回收员
      showCollector: false,
      //弹框名称
      id: 0,
      where: {
        telphone: '',
        type: '',
        way: '',
        start_time: '',
        end_time: '',
        account_type: ''
      },
      get: 0,
      out: 0,
      remain: 0,
      todayGet: 0,
      todayOut: 0,
      avatarCountUsed: 0,
      voiceCountUsed: 0,
      videoCountUsed: 0,
      account_type: 0
    };
  },
  methods: {
    onExport() {
      list(this.where)
        .then((data) => {
          this.exportData = data.list;

          let array = [];

          if (this.account_type == 1) {
            array = [
              ['账号', '操作前次数', '操作次数', '使用类型', '操作时间']
            ];
          } else if (this.account_type == 2) {
            array = [
              ['账号', '操作前点数', '操作点数', '使用类型', '操作时间']
            ];
          }

          this.exportData.forEach((d, i) => {
            d.point = d.type == 1 ? '+' + d.point : '-' + d.point;

            if (
              !d.figureAccount ||
              typeof d.figureAccount === 'undefined' ||
              typeof d.figureAccount.telphone === 'undefined' ||
              d.figureAccount.telphone == null ||
              d.figureAccount.telphone === ''
            ) {
              d.account = '无';
            } else {
              d.account = d.figureAccount.telphone;
            }

            if (d.way == 0) {
              d.way = '后台操作';
            } else if (d.way == 1) {
              d.way = '点数充值';
            } else if (d.way == 2) {
              d.way = '声音克隆入门版';
            } else if (d.way == 3) {
              d.way = '声音克隆高保真';
            } else if (d.way == 4) {
              d.way = '形象克隆线路一';
            } else if (d.way == 5) {
              d.way = '视频换脸';
            } else if (d.way == 6) {
              d.way = '视频合成高级版';
            } else if (d.way == 7) {
              d.way = '形象克隆高级版';
            } else if (d.way == 8) {
              d.way = '声音克隆高保真合成';
            } else if (d.way == 9) {
              d.way = '视频合成线路三';
            } else if (d.way == 10) {
              d.way = 'ai文案创作';
            } else if (d.way == 11) {
              d.way = '视频提取文案';
            } else if (d.way == 12) {
              d.way = '高级视频2生成';
            } else if (d.way == 13) {
              d.way = '专业版声音克隆';
            } else if (d.way == 15) {
              d.way = 'ai标题生成';
            } else if (d.way == 16) {
              d.way = '抖音视频扣点';
            } else if (d.way == 17) {
              d.way = '快手视频扣点';
            } else if (d.way == 18) {
              d.way = '视频号视频扣点';
            } else if (d.way == 19) {
              d.way = '发布小红薯';
            }
            else if (d.way == 20) {
              d.way = '获取抖音二维码';
            }
            else if (d.way == 21) {
              d.way = '抖音授权';
            }
            else if (d.way == 22) {
              d.way = '获取视频号二维码';
            }
            else if (d.way == 23) {
              d.way = '视频号授权';
            }
            else if (d.way == 24) {
              d.way = '获取小红薯二维码';
            }
            else if (d.way == 25) {
              d.way = '小红薯授权';
            }
              else if (d.way == 26) {
              d.way = '线路4合成';
            }  else if (d.way == 27) {
              d.way = 'ip账号采集';
            }  else if (d.way == 28) {
              d.way = '主页视频分析';
            }

            array.push([d.account, d.current, d.point, d.way, d.create_time]);
          });
          const sheet = utils.aoa_to_sheet(array);
          // 如果需要设置列宽可以这样写
          sheet['!cols'] = [
            { wch: 20 },
            { wch: 20 },
            { wch: 20 },
            { wch: 30 },
            { wch: 20 }
          ];
          writeFile(
            {
              SheetNames: ['Sheet1'],
              Sheets: {
                Sheet1: sheet
              }
            },
            '记录列表.xlsx'
          );
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    },
    beforeHandleCommand(index, row, command) {
      return {
        index: index,
        row: row,
        command: command
      };
    },
    /* 下拉菜单点击事件 */
    onDropClick(command) {
      if (command.command === 'password') {
        this.openReserve(command.row);
      } else if (command.command === 'appsecret') {
        this.openPack(command.row);
      }
    },

    /* 表格数据源 */
    datasource({ page, limit, where, order }) {
      where.account_type = this.account_type;
      this.where = where;
      return list({ ...where, ...order, page, limit });
    },
    /* 刷新表格 */
    reload(where) {
      where = where ? where : {};
      where.account_type = this.account_type;
      this.where = where;
      this.$refs.table.reload({ page: 1, where: where });
    },
    /* 打开编辑弹窗 */
    openEdit(row) {
      this.current = row;
      this.showEdit = true;
    },
    /* 删除 */
    remove(row) {
      const loading = this.$loading({ lock: true });
      remove(row.id)
        .then((msg) => {
          loading.close();
          this.$message.success(msg);
          this.reload();
        })
        .catch((e) => {
          loading.close();
          this.$message.error(e.message);
        });
    },

    /* 批量删除 */
    removeBatch() {
      if (!this.selection.length) {
        this.$message.error('请至少选择一条数据');
        return;
      }
      this.$confirm('确定要删除选中的数据吗?', '提示', {
        type: 'warning'
      })
        .then(() => {
          const loading = this.$loading({ lock: true });
          remove(this.selection.map((d) => d.id))
            .then((msg) => {
              loading.close();
              this.$message.success(msg);
              this.reload();
            })
            .catch((e) => {
              loading.close();
              this.$message.error(e.message);
            });
        })
        .catch(() => {});
    },
    dataStatis() {
      statis()
        .then((data) => {
          if (data != null) {
            this.get = data.get;
            this.out = data.out;
            this.remain = data.remain;
            this.todayGet = data.todayGet;
            this.todayOut = data.todayOut;
            this.avatarCountUsed = data.avatarCountUsed;
            this.voiceCountUsed = data.voiceCountUsed;
            this.videoCountUsed = data.videoCountUsed;
          }
        })
        .catch((e) => {
          this.$message.error(e.message);
        });
    }
  },
  mounted() {
    this.dataStatis();
  },
  watch: {
    $route: {
      handler(route) {
        if (route.path == '/accountLog') {
          this.account_type = this.loginUser.account_type;
        } else {
          this.account_type = route.query.type;
        }
      },
      immediate: true
    },
    account_type() {
      this.reload();
    }
  }
};
</script>

<style lang="scss" scoped>
.drag {
  background: #000 !important;
  background-image: linear-gradient(#333, #999) !important;
}

.ele-cell-content {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.card_box_cir1 .iconfont {
  font-size: 26px;
  color: #fff;
}

.card_box {
  width: 100%;
  height: 100%;
  display: flex;
  -webkit-box-align: center;
  align-items: center;
  box-sizing: border-box;
  border-radius: 4px;
}
.card_box .card_box_cir .card_box_cir1,
.card_box .card_box_cir {
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.card_box .card_box_cir .card_box_cir1,
.card_box .card_box_cir {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  display: flex;
  -webkit-box-pack: center;
  justify-content: center;
  -webkit-box-align: center;
  align-items: center;
}

.card_box .card_box_cir {
  width: 60px;
  height: 60px;
  overflow: hidden;
  margin-right: 20px;
}

.card_box .card_box_txt .sp1 {
  display: block;
  color: #252631;
  font-size: 24px;
}

.card_box .card_box_txt .sp2 {
  display: block;
  color: #98a9bc;
  font-size: 12px;
}

.one {
  background: #fff3e0;
}

.two {
  background: #fde7e7;
}

.three {
  background: #e4ecff;
}

.four {
  background: #eaf9e1;
}

.five {
  background: #f7daf1;
}

.one1 {
  background: #ffab2b;
}
.two1 {
  background: #ee1616;
}
.three1 {
  background: #4d7cfe;
}
.four1 {
  background: #6dd230;
}
.five1 {
  background: #b715c7;
}
</style>
